<script setup>
  import {ref} from 'vue'

  // 响应式数据 当发生变化，会自动更新 DOM 树
  let count = ref(0)
  let addCount = () => {
    count.value++
  }
  let incrCount = () => {
    count.value--
  }
  function fun() {
    // alert("超链接被点击了")
    let flag = confirm("确认要访问目标连接吗")
    if (!flag) {
      // 原生 js 编码方式阻止组件的默认行为
      event.preventDefault()
    }
  }
  function fun2() {
    alert("超链接被点击了")
  }

</script>

<template>
  <div>
    <h1>count 的值是：{{count}}</h1>
    <!-- 方法事件处理器 -->
    <button v-on:click="addCount()">addCount</button>
    <!-- 内联事件处理器 -->
    <button @click="count++">addCount2</button>
    <!-- 事件修饰符 once 只绑定一次事件 -->
    <button @click.once="count--">incrCountOnce</button>
    <br>
    <a href = "https://www.baidu.com" v-on:click="fun($event)">百度</a>
    <a href = "https://www.baidu.com" v-on:click.prevent="fun2()">百度</a>
  </div>
</template>

<style scoped>

</style>
